<template>
  <div class="browseList">
    <div class="browse-header"><i class="el-icon-view"></i> 最近浏览</div>
    <div class="content">
      <el-carousel :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="group in groupCount" :key="group">
          <el-row >
            <el-col v-for="(b,index) in browseList.slice((group*5),(group+1)*5)" :key="index+group*5" >
              <el-card :body-style="{ padding: '0px' }" >
                <div class="conntent">
                  <router-link class="list-group-item" :to="`/purchasePage?curBookId=${b.id}`">
                    <img class="browseImg" :src="$store.state.baseImgUrl+b.img"><br>
                    <div class="title">{{b.name}}</div>
                  </router-link>
                  <div class="footer">
                    <span class="price">￥{{b.price|rounding}}元</span>
                    <span class="payedNum">销量<span class="num">{{b.saleCount}}</span></span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="noneConnect" v-if="isHide">
      <img src="@/assets/index_images/wodezuji.png" alt="" class="imgIcon">
      <span class="word">还没有浏览记录哦！</span>
    </div>

  </div>
</template>

<script>
export default {
  name: "browse",
  data(){
    return{
      bookIds:[],
      browseList:[],
      isHide:false,
    }
  },
  computed:{
    groupCount(){
      let number = Math.ceil(this.browseList.length/5);
      let arr=[]
      for (let i=0;i<number;i++){
        arr.push(i)
      }
      return arr
    }
  },
  created() {
    const maxBrowse=15
    var storage=window.localStorage;
    let data=storage.bookId
    if(data==null){
      this.isHide=true;
      return
    }else {
      let datas=data.split(",")
      for (let i = 0; i <maxBrowse ; i++) {
        if(datas[i]!=null&&datas[i]!=""){
          this.bookIds.push(datas[i])
        }
      }
    }
    this.getRequest('/p/pms/book/ids',{bids:this.bookIds.join()}).then((resp)=>{
      this.browseList = []
      this.bookIds.forEach(item=>{
        resp.data.some(browse=>{
          if (browse.id == item){
            this.browseList.push(browse);
            return true
          }
        })
      })
    })
  }
}
</script>

<style scoped>
  .browseList{
    width: 100%;
    height: 334px;
    margin:80px auto;
    border: 1px solid #f18080;
    border-top: none;
    float: left;
  }
  .browse-header{
    font:400 20px 黑体;
    padding:10px 15px 8px 15px;
    border: 1px solid #f18080;
    background: #ee8080;
    color: #4c4c4c;
    font-weight: bold;
  }
  .el-col{
    width: 16%;
    margin: 20px 0px 15px 3.3%;
  }
  .browseImg{
    padding:20px 20px 5px 18px;
    width: 81%;
    height: 150px;
  }
  .title,.footer{
    color: black;
    width: 83%;
    border: none;
    margin-left: 21px;
  }
  .footer{
    width: 81.1%;
    margin-left: 17px;
  }
  .payedNum{
    float: right;
  }
  .title{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .price,.num{
    color: #d74f54;
  }
  .el-card{
    padding-bottom: 7px;
  }
  ::v-deep .el-carousel__arrow{
    width: 60px;
    height: 60px;
    background: #f89ca8;
    opacity: 0.3;
    font-size: 30px;
    font-weight: bold;
  }
  .noneConnect{
    font-size: 20px;
    letter-spacing: 10px;
    position: relative;
    top:-180px;
    text-align: center;
  }
  .imgIcon{
    width: 40px;
    height: 40px;
  }
  .word{
    position: relative;
    left: 16px;
    top:-10px
  }
  .list-group-item:hover{
    text-decoration: underline;
  }
</style>